<template>
    <div class="openMember">
        <x-header :left-options="{showBack: true,backText:'开通会员'}" class="headerBox"></x-header>
        <div class="scroll">
            <div class="memberCard" v-for="(card, indexc) in cards" :key="indexc">
                <img src="../assets/images/dredgevip15.png"/>
                <div class="cardInfo">
                    <div class="cardTxt">
                        <div>{{card.name}}</div>
                        <div class="fs_24">￥{{card.monthPrice/100}}元/月 • ￥{{card.yearPrice/100}}元/年</div>
                        <div class="fs_24">{{card.describe}}</div>
                    </div>
                    <img src="../assets/images/dredgevip15.png" class="head"/>
                </div>
                <div class="openBtn" @click="showVip(indexc)">立即开通</div>
            </div>
        </div>
        <div class="adImg">
            <img :src="adImg" alt/>
        </div>
        <div class="btn">
            <!--            <div class='help'>支付帮助</div>-->
            <div class="openButton" @click="vipPOP=true">立即开通</div>
        </div>

        <div class="about">
            <div class="aboutTitle">关于我们：</div>
            <span
                    class="aboutUs-text"
            >北京天景润禾教育科技有限公司（简称润禾教育），是天景集团旗下全资子公司，是中小学个性化教育品牌、“互联网＋教育”创新教学实践教育机构，公司自优化升级以来秉承“全日制学校＋直营校＋合作校＋教育共享平台”四位一体协同发展战略理念，借助自身优秀师资教研能力、成熟多样的产品体系及直营校运营管理经验，在全国建立了十几个直营校区和百余家合作学习中心，为不同地区学生提供优质教育服务和教育产品。</span>
        </div>
        <popup v-model="vipPOP">
            <div class="vipPOPBox">
                <div class="title">会员类型</div>
                <div class="vipTypeBox">
                    <checker
                            v-model="vipType"
                            default-item-class="typeItem"
                            selected-item-class="typeItemSelected"
                    >
                        <checker-item v-for="(item, index) in cards" :key="index" :value="index">
                            <div class="cardTxt">
                                <div>{{item.name}}</div>
                                <div class="money">￥{{item.monthPrice/100}}元/月 • ￥{{item.yearPrice/100}}元/年</div>
                            </div>
                        </checker-item>
                    </checker>
                </div>
                <div class="title">开通时长</div>
                <div class="vipTypeBox">
                    <checker
                            v-model="vipTime"
                            default-item-class="typeItem"
                            selected-item-class="typeItemSelected"
                    >
                        <checker-item v-if="cards.length>0" v-for="(item, index) in timeList" :key="index"
                                      :value="index">

                            <div class="cardTxt timeBox" v-show="item.type=='month'">
                                <div>{{item.name}}</div>
                                <div class="money">￥{{cards[vipType].monthPrice /100}}元</div>
                            </div>
                            <div class="cardTxt timeBox" v-show="item.type=='year'">
                                <div>{{item.name}}</div>
                                <div class="money">￥{{cards[vipType].yearPrice/100}}元</div>
                            </div>
                        </checker-item>
                    </checker>
                </div>
                <div class="footerBox" @click="toapply()">立即开通</div>
            </div>
        </popup>
    </div>
</template>

<script>
    import {XHeader, Popup, Checker, CheckerItem} from 'vux'
    import {userLevels, createVipPayRecord, openVip, userInfo} from '@/api/index/index'
    import store from '../store/store'

    export default {
        components: {
            XHeader,
            Popup,
            Checker,
            CheckerItem
        },
        data() {
            return {
                vipPOP: false,
                vipType: 0,
                vipTime: 0,
                cards: [],
                adImg: require('../assets/images/dredgevip13.png'),
                activeClass: 0,
                nowMoney: '999',
                timeList: [
                    {
                        type: "month",
                        name: '一个月',
                    },
                    {
                        type: "year",
                        name: '一年',
                    }
                ],
                userInfo: '',
                userId: '',
            }
        },
        mounted() {
            userLevels(this.$store.state.user.tenantId).then(res => {
                console.log(res.data.data.userLevels)
                this.$nextTick(() => {
                    this.cards = res.data.data.userLevels
                })
            }).catch(err => {
                console.log(err)
            });
            userInfo(this.$store.state.user.id).then(res => {
                this.userInfo = res.data.data.userInfo;
                this.userId = res.data.data.userInfo.id;
            }).catch(err => {
                console.log(err)
            });
        },
        methods: {
            getItme(data, index) {
                this.activeClass = index;
                this.nowMoney = data.price
            },
            showVip(index) {
                this.vipType = index;
                this.vipPOP = true
            },
            getUrlParam(paraName) {
                var url = document.location.toString();
                var arrObj = url.split("?");

                if (arrObj.length > 1) {
                    var arrPara = arrObj[1].split("&");
                    var arr;

                    for (var i = 0; i < arrPara.length; i++) {
                        arr = arrPara[i].split("=");

                        if (arr != null && arr[0] == paraName) {
                            return arr[1];
                        }
                    }
                    return "";
                } else {
                    return "";
                }
            },
            toapply() {
                console.log();
                if (this.userInfo.isVip == "1") {
                    var conf = confirm("确定开通会员?")
                    if (conf == true) {
                        var code = this.getUrlParam("code"); //是否存在code
                        var tenantId = this.$store.state.user.tenantId;
                        var userId = this.$store.state.user.id;
                        createVipPayRecord(this.cards[this.vipType].id, tenantId, userId, code, this.timeList[this.vipTime].type).then(res => {
                            var levelId = res.data.data.levelId;
                            if (typeof WeixinJSBridge == "undefined") {
                                if (document.addEventListener) {
                                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                                } else if (document.attachEvent) {
                                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                                }
                            } else {
                                onBridgeReady();
                            }

                            function onBridgeReady() {
                                WeixinJSBridge.invoke(
                                    'getBrandWCPayRequest', {
                                        "appId": res.data.data.appId,     //公众号名称，由商户传入
                                        "timeStamp": res.data.data.timeStamp,         //时间戳，自1970年以来的秒数
                                        "nonceStr": res.data.data.nonceStr, //随机串
                                        "package": res.data.data.package,
                                        "signType": "MD5",         //微信签名方式：
                                        "paySign": res.data.data.paySign //微信签名
                                    },
                                    function (res) {
                                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                                            alert("开通成功");
                                            openVip(levelId, tenantId, userId).then(res => {
                                                console.log(res.data.data);
                                                console.log(res.data.data.status);
                                                window.location.href = "http://www.rhyun.top/#/index"
                                            }).catch(err => {
                                                console.log(err)
                                            });

                                            // 使用以上方式判断前端返回,微信团队郑重提示：
                                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                        }
                                    });
                            }

                        })
                    }

                } else {
                    var code = this.getUrlParam("code"); //是否存在code
                    var tenantId = this.$store.state.user.tenantId;
                    var userId = this.$store.state.user.id;
                    createVipPayRecord(this.cards[this.vipType].id, tenantId, userId, code, this.timeList[this.vipTime].type).then(res => {
                        var levelId = res.data.data.levelId;
                        if (typeof WeixinJSBridge == "undefined") {
                            if (document.addEventListener) {
                                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                            } else if (document.attachEvent) {
                                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                            }
                        } else {
                            onBridgeReady();
                        }

                        function onBridgeReady() {
                            WeixinJSBridge.invoke(
                                'getBrandWCPayRequest', {
                                    "appId": res.data.data.appId,     //公众号名称，由商户传入
                                    "timeStamp": res.data.data.timeStamp,         //时间戳，自1970年以来的秒数
                                    "nonceStr": res.data.data.nonceStr, //随机串
                                    "package": res.data.data.package,
                                    "signType": "MD5",         //微信签名方式：
                                    "paySign": res.data.data.paySign //微信签名
                                },
                                function (res) {
                                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                                        alert("开通成功");
                                        openVip(levelId, tenantId, userId).then(res => {
                                            console.log(res.data.data);
                                            console.log(res.data.data.status);
                                            window.location.href = "http://www.rhyun.top/#/index"
                                        }).catch(err => {
                                            console.log(err)
                                        });

                                        // 使用以上方式判断前端返回,微信团队郑重提示：
                                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                    } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                                        //Toast('支付取消')
                                        var appid = "wxda53a4a8b2d85023"; //为测试号id
                                        var local = "http://www.rhyun.top/#/openMember";
                                        //不存在就打开上面的地址进行授权
                                        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`;
                                    }
                                });
                        }

                    })
                }


            },
        }
    }
</script>

<style lang="less" scoped>
    .openMember {
        /deep/ .headerBox {
            background-color: #fff;
            border-bottom: 1px solid #eee;

            .vux-header-left {
                left: 24px;

                .vux-header-back {
                    color: #000;
                }

                .left-arrow:before {
                    border-color: #000;
                }
            }

            .vux-header-title {
                color: #000;
                font-size: 30px;
            }
        }

        //顶部卡片
        .scroll {
            width: 100%;
            white-space: nowrap;
            overflow-x: auto;
            padding: 20px 0 20px 30px;
            box-sizing: border-box;

            .memberCard {
                display: inline-block;
                position: relative;
                margin-right: 20px;

                img {
                    width: 672px;
                    height: 372px;
                }

                .cardInfo {
                    position: absolute;
                    top: 50px;
                    left: 50px;
                    right: 50px;
                    display: flex;
                    justify-content: space-between;

                    .cardTxt {
                        color: #ffeddd;

                        div:first-child {
                            font-size: 34px;
                            font-weight: 600;
                            margin-bottom: 20px;
                        }
                    }

                    .head {
                        width: 80px;
                        height: 80px;
                    }
                }

                .openBtn {
                    position: absolute;
                    bottom: 50px;
                    left: 50px;
                    background: -webkit-linear-gradient(left, #f6e8dc, #e4cbb5);
                    background: -o-linear-gradient(right, #f6e8dc, #e4cbb5);
                    background: -moz-linear-gradient(right, #f6e8dc, #e4cbb5);
                    background: linear-gradient(to right, #f6e8dc, #e4cbb5);
                    font-size: 24px;
                    padding: 15px 50px;
                    border-radius: 30px;
                }
            }
        }

        /* 特权 */

        .privileges {
            padding: 20px 30px;

            .privilegeTitle {
                font-size: 32px;
                text-align: center;

                img {
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                    margin-left: 10px;
                }
            }

            .privilegeList {
                display: flex;
                flex-wrap: wrap;
                padding-top: 30px;

                .privilege {
                    text-align: center;
                    width: 20%;
                    margin-bottom: 20px;

                    img {
                        width: 90px;
                        height: 90px;
                    }
                }
            }
        }

        .adImg {
            border-bottom: 20px solid #f8f9fa;
            text-align: center;

            img {
                width: 690px;
                height: 139px;
            }
        }

        /* 套餐 */

        .packageBox {
            background-color: #fff;
            border-bottom: 0.266667rem solid #f8f9fa;

            .packageTitle {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20px 30px;
                border-bottom: 1px solid #f2f5f7;

                div:first-child {
                    font-size: 34px;
                    color: #936232;
                }

                div:last-child {
                    font-size: 24px;
                    color: #9f7650;
                }
            }

            .packages {
                padding: 40px 30px;
                display: flex;
                justify-content: space-between;

                .package {
                    text-align: center;
                    border: 2px solid #dad7d4;
                    color: #a4a19c;
                    border-radius: 10px;
                    width: 48%;
                    padding: 20px 0;

                    div:first-child {
                        font-size: 38px;
                    }

                    div:last-child {
                        font-size: 32px;
                    }
                }

                .curr {
                    border: 2px solid #fa5a5f;

                    div {
                        color: #fa5a5f;
                    }
                }
            }

            .price {
                font-size: 42px;
                padding: 0 30px 30px;
            }
        }

        .redeemCode {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px;
            background: #fff;
            font-size: 34px;
            border-bottom: 0.266667rem solid #f8f9fa;

            img {
                width: 26px;
                height: 26px;
            }
        }

        .btn {
            text-align: center;
            padding-top: 50px;
            padding-bottom: 10px;

            background-color: #f8f9fa;

            .help {
                font-size: 24px;
                color: #9f9f9f;
                text-decoration: underline;
            }

            .openButton {
                background: -webkit-linear-gradient(left, #f85e5c, #f97f67);
                background: -o-linear-gradient(right, #f85e5c, #f97f67);
                background: -moz-linear-gradient(right, #f85e5c, #f97f67);
                background: linear-gradient(to right, #f85e5c, #f97f67);
                color: #fff;
                margin: 20px 60px;
                font-size: 34px;
                padding: 20px;
                border-radius: 50px;
                bottom: 0;
            }
        }

        .about {
            background: #fff;
            padding: 30px;
            color: #a06d47;

            .aboutTitle {
                font-size: 32px;
                line-height: 1.5;
            }

            .aboutTxt {
                font-size: 26px;
                padding: 15px;
            }

            .bottomMenu {
                font-size: 26px;
                display: flex;
                justify-content: space-between;
                margin-top: 20px;

                div {
                    background: #fde8e7;
                    color: #000;
                    width: 48%;
                    text-align: center;
                    padding: 20px 0;
                    border-radius: 10px;
                }

                img {
                    width: 10px;
                    height: 12px;
                    margin-left: 20px;
                    vertical-align: middle;
                }
            }
        }

        .vipPOPBox {
            background-color: #fff;
            height: 800px;
            position: relative;

            .title {
                padding: 20px;
                font-size: 36px;
            }

            .vipTypeBox {
                overflow-x: auto;
                white-space: nowrap;
                padding: 20px;

                .typeItem {
                    width: 300px;
                    height: 150px;
                    text-align: center;
                    border-radius: 10px;
                    border: 2px solid #ccc;
                    background-color: #fff;
                    margin-right: 20px;
                    overflow: hidden;
                }

                .typeItemSelected {
                    border-color: #ff4a00;
                    background-color: #fff5ee;
                }

                .cardTxt {
                    color: #171616;
                    line-height: 80px;

                    div:first-child {
                        font-size: 34px;
                        font-weight: 600;
                    }

                    .money {
                        font-size: 26px;
                    }
                }

                .timeBox {
                    .money {
                        font-size: 30px;
                        color: #f85e5c;
                    }
                }

            }

            .footerBox {
                position: absolute;
                bottom: 20px;
                left: 50px;
                right: 50px;
                background: linear-gradient(to right, #f6e8dc, #e4cbb5);
                font-size: 30px;
                padding: 20px 50px;
                border-radius: 30px;
                text-align: center;
            }
        }
    }
</style>